<template>
	<view>
		<previewImage ref="previewImage" :imgs="images" @tap_pre="onClick" @change="onChange" :selectIndex="currentIndex" />

		<uni-transition  :mode-class="modeClass" 
			:show="show">
			<Nav bg-color="rgba(0,0,0,0.4)" color="#fff">
				<view class="" style="padding: 20rpx;">
					<uni-icons type="star" size="30" color="#fff"></uni-icons>
				</view>
			</Nav>
		</uni-transition>
		
		<uni-transition ref="bottom" :mode-class="modeClass2" :styles="{position:'fixed', bottom:'0px', width:'100%', backgroundColor:'rgba(0,0,0,0.4)', padding:'20rpx'}"
			:show="show">
			<view class="bottom">
				<scroll-view  scroll-x="true" :scroll-left="scrollLeft" :scroll-with-animation="true">
					<view class="" :style="{width: W+'px'}">
						<image class="list-images" 
							v-for="(item, index) in images" :src="item" mode="aspectFill" :key="index"
							:class="currentIndex == index ? 'active':''"
						>
						</image>
					</view>
					
				</scroll-view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
	import previewImage from '@/components/kxj-previewImage/kxj-previewImage.vue';
	import Nav from "../../../components/nav.vue"
	export default {
		onLoad(p) {
			this.currentIndex = parseInt(p.index)
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('init', (data) => {
				this.images = data.map(item => item.image)
			})
		},
		components: { previewImage, Nav},
		onReady() {
			if(this.currentIndex != 0){
				this.$nextTick(() => {
					setTimeout(() => {
						this.autoScroll()
					}, 1000)
				})
			}
		},
		data() {
			return {
				images: [],
				show: true,
				modeClass: ['fade', 'slide-top'],
				modeClass2: ['fade', 'slide-bottom'],
				currentIndex: 0,
				scrollLeft: 0
			};
		},
		methods: {
			onClick(){console.log(this.show)
				this.show = !this.show
			},
			autoScroll(){
				this.scrollLeft = this.currentIndex * uni.upx2px(160) - (uni.getWindowInfo().windowWidth - uni.upx2px(160)) / 2
			},
			onChange(e){
				this.currentIndex = e.target.current
				this.autoScroll()
			}
		},
		computed: {
			W(){
				return this.images.length * uni.upx2px(160)
			}
		}
	}
</script>

<style scoped>
	.container{
		width: 100vw;
		height: 100vh;
	}
	.list-images{
		width: 148rpx; height: 148rpx;
		border: 1rpx solid #999;
	}
	.list-images + .list-images{
		margin-left: 10rpx;
	}
	.active{
		border-color: #fff;
	}
	
	.bottom {
	  padding-bottom: constant(safe-area-inset-bottom); /* 兼容iOS < 11.2 */
	  padding-bottom: env(safe-area-inset-bottom); /* 适用于iOS >= 11.2 */
	}
	 
	/* 针对安卓设备 */
	@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
	  .bottom {
	    padding-bottom: constant(safe-area-inset-bottom);
	    padding-bottom: env(safe-area-inset-bottom);
	  }
	}
</style>